<template>
  <div class="service-management">
    <div class="page-header">
      <h2>服务管理</h2>
    </div>

    <!-- 统计卡片 -->
    <Row :gutter="16" class="statistics-row">
      <Col :span="6">
        <StatisticsCard
          title="待处理工单"
          :value="statistics.pendingWorkOrders"
          color="#ff4d4f"
          icon="ant-design:tool-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="进行中工单"
          :value="statistics.processingWorkOrders"
          color="#1890ff"
          icon="ant-design:clock-circle-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="今日清洁任务"
          :value="statistics.todayCleaningTasks"
          color="#52c41a"
          icon="ant-design:clean-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="未读通知"
          :value="statistics.unreadNotifications"
          color="#faad14"
          icon="ant-design:notification-outlined"
        />
      </Col>
    </Row>

    <!-- 功能模块 -->
    <Row :gutter="16" class="module-row">
      <!-- 报修工单 -->
      <Col :span="8">
        <Card title="报修工单管理" :bordered="false" class="module-card">
          <div class="module-content">
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">待处理：</span>
                <span class="stat-value pending">{{
                  statistics.pendingWorkOrders
                }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">进行中：</span>
                <span class="stat-value processing">{{
                  statistics.processingWorkOrders
                }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">已完成：</span>
                <span class="stat-value completed">{{
                  statistics.completedWorkOrders
                }}</span>
              </div>
            </div>
            <div class="module-actions">
              <Button type="primary" @click="showWorkOrderModal = true">
                <IconifyIcon icon="ant-design:plus-outlined" />
                新建工单
              </Button>
              <Button @click="navigateToWorkOrders">
                <IconifyIcon icon="ant-design:eye-outlined" />
                查看全部
              </Button>
            </div>
          </div>
        </Card>
      </Col>

      <!-- 清洁安排 -->
      <Col :span="8">
        <Card title="清洁任务管理" :bordered="false" class="module-card">
          <div class="module-content">
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">今日任务：</span>
                <span class="stat-value today">{{
                  statistics.todayCleaningTasks
                }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">进行中：</span>
                <span class="stat-value processing">{{
                  statistics.processingCleaningTasks
                }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">已完成：</span>
                <span class="stat-value completed">{{
                  statistics.completedCleaningTasks
                }}</span>
              </div>
            </div>
            <div class="module-actions">
              <Button type="primary" @click="showCleaningModal = true">
                <IconifyIcon icon="ant-design:plus-outlined" />
                安排清洁
              </Button>
              <Button @click="navigateToCleaning">
                <IconifyIcon icon="ant-design:eye-outlined" />
                查看全部
              </Button>
            </div>
          </div>
        </Card>
      </Col>

      <!-- 通知公告 -->
      <Col :span="8">
        <Card title="通知公告管理" :bordered="false" class="module-card">
          <div class="module-content">
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">未读通知：</span>
                <span class="stat-value unread">{{
                  statistics.unreadNotifications
                }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">今日发布：</span>
                <span class="stat-value today">{{
                  statistics.todayNotifications
                }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">总通知数：</span>
                <span class="stat-value total">{{
                  statistics.totalNotifications
                }}</span>
              </div>
            </div>
            <div class="module-actions">
              <Button type="primary" @click="showNotificationModal = true">
                <IconifyIcon icon="ant-design:plus-outlined" />
                发布通知
              </Button>
              <Button @click="navigateToNotifications">
                <IconifyIcon icon="ant-design:eye-outlined" />
                查看全部
              </Button>
            </div>
          </div>
        </Card>
      </Col>
    </Row>

    <!-- 最近活动 -->
    <Card title="最近活动" :bordered="false" class="recent-activities">
      <Timeline>
        <TimelineItem v-for="activity in recentActivities" :key="activity.id">
          <template #dot>
            <IconifyIcon
              :icon="activity.icon"
              :style="{ color: activity.color }"
            />
          </template>
          <div class="activity-content">
            <div class="activity-title">{{ activity.title }}</div>
            <div class="activity-desc">{{ activity.description }}</div>
            <div class="activity-time">{{ formatDateTime(activity.time) }}</div>
          </div>
        </TimelineItem>
      </Timeline>
    </Card>

    <!-- 报修工单弹窗 -->
    <Modal
      v-model:open="showWorkOrderModal"
      title="新建报修工单"
      width="600px"
      @ok="handleWorkOrderSave"
      @cancel="handleWorkOrderCancel"
    >
      <Form :model="workOrderForm" layout="vertical">
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="报修房间" name="roomNumber">
              <Select
                v-model:value="workOrderForm.roomNumber"
                placeholder="请选择房间"
                style="width: 100%"
              >
                <SelectOption
                  v-for="room in availableRooms"
                  :key="room.id"
                  :value="room.roomNumber"
                >
                  {{ room.roomNumber }} ({{ room.tenantName }})
                </SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="报修类型" name="type">
              <Select
                v-model:value="workOrderForm.type"
                placeholder="请选择报修类型"
                style="width: 100%"
              >
                <SelectOption value="plumbing">水电维修</SelectOption>
                <SelectOption value="electrical">电器维修</SelectOption>
                <SelectOption value="furniture">家具维修</SelectOption>
                <SelectOption value="appliance">设备维修</SelectOption>
                <SelectOption value="other">其他</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="报修描述" name="description">
          <Textarea
            v-model:value="workOrderForm.description"
            placeholder="请详细描述问题"
            :rows="3"
          />
        </FormItem>
        <FormItem label="紧急程度" name="priority">
          <Select
            v-model:value="workOrderForm.priority"
            placeholder="请选择紧急程度"
            style="width: 100%"
          >
            <SelectOption value="low">一般</SelectOption>
            <SelectOption value="medium">紧急</SelectOption>
            <SelectOption value="high">非常紧急</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="联系电话" name="contactPhone">
          <Input
            v-model:value="workOrderForm.contactPhone"
            placeholder="请输入联系电话"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 清洁安排弹窗 -->
    <Modal
      v-model:open="showCleaningModal"
      title="安排清洁任务"
      width="600px"
      @ok="handleCleaningSave"
      @cancel="handleCleaningCancel"
    >
      <Form :model="cleaningForm" layout="vertical">
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="清洁房间" name="roomNumber">
              <Select
                v-model:value="cleaningForm.roomNumber"
                placeholder="请选择房间"
                style="width: 100%"
              >
                <SelectOption
                  v-for="room in availableRooms"
                  :key="room.id"
                  :value="room.roomNumber"
                >
                  {{ room.roomNumber }}
                </SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="清洁类型" name="type">
              <Select
                v-model:value="cleaningForm.type"
                placeholder="请选择清洁类型"
                style="width: 100%"
              >
                <SelectOption value="regular">定期清洁</SelectOption>
                <SelectOption value="checkout">退租清洁</SelectOption>
                <SelectOption value="deep">深度清洁</SelectOption>
                <SelectOption value="emergency">紧急清洁</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="计划日期" name="plannedDate">
              <DatePicker
                v-model:value="cleaningForm.plannedDate"
                style="width: 100%"
                placeholder="请选择计划日期"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="计划时间" name="plannedTime">
              <TimePicker
                v-model:value="cleaningForm.plannedTime"
                style="width: 100%"
                placeholder="请选择计划时间"
              />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="清洁要求" name="requirements">
          <Textarea
            v-model:value="cleaningForm.requirements"
            placeholder="请描述清洁要求"
            :rows="3"
          />
        </FormItem>
        <FormItem label="备注" name="remarks">
          <Textarea
            v-model:value="cleaningForm.remarks"
            placeholder="请输入备注信息"
            :rows="2"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 通知公告弹窗 -->
    <Modal
      v-model:open="showNotificationModal"
      title="发布通知公告"
      width="600px"
      @ok="handleNotificationSave"
      @cancel="handleNotificationCancel"
    >
      <Form :model="notificationForm" layout="vertical">
        <FormItem label="通知标题" name="title">
          <Input
            v-model:value="notificationForm.title"
            placeholder="请输入通知标题"
          />
        </FormItem>
        <FormItem label="通知类型" name="type">
          <Select
            v-model:value="notificationForm.type"
            placeholder="请选择通知类型"
            style="width: 100%"
          >
            <SelectOption value="announcement">公告</SelectOption>
            <SelectOption value="maintenance">维护通知</SelectOption>
            <SelectOption value="emergency">紧急通知</SelectOption>
            <SelectOption value="reminder">提醒通知</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="通知范围" name="scope">
          <Select
            v-model:value="notificationForm.scope"
            placeholder="请选择通知范围"
            style="width: 100%"
          >
            <SelectOption value="all">全体租客</SelectOption>
            <SelectOption value="building">单栋楼</SelectOption>
            <SelectOption value="floor">单楼层</SelectOption>
            <SelectOption value="specific">指定房间</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="通知内容" name="content">
          <Textarea
            v-model:value="notificationForm.content"
            placeholder="请输入通知内容"
            :rows="4"
          />
        </FormItem>
        <FormItem label="优先级" name="priority">
          <Select
            v-model:value="notificationForm.priority"
            placeholder="请选择优先级"
            style="width: 100%"
          >
            <SelectOption value="low">一般</SelectOption>
            <SelectOption value="medium">重要</SelectOption>
            <SelectOption value="high">紧急</SelectOption>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

import { IconifyIcon } from '@vben/icons';

import StatisticsCard from '#/components/hotel/StatisticsCard.vue';
import {
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  FormItem,
  Input,
  message,
  Modal,
  Row,
  Select,
  SelectOption,
  Textarea,
  TimePicker,
  Timeline,
  TimelineItem,
} from 'ant-design-vue';
import dayjs from 'dayjs';

const router = useRouter();

// 响应式数据
const showWorkOrderModal = ref(false);
const showCleaningModal = ref(false);
const showNotificationModal = ref(false);

// 报修工单表单
const workOrderForm = reactive({
  roomNumber: '',
  type: '',
  description: '',
  priority: 'medium',
  contactPhone: '',
});

// 清洁安排表单
const cleaningForm = reactive({
  roomNumber: '',
  type: '',
  plannedDate: null,
  plannedTime: null,
  requirements: '',
  remarks: '',
});

// 通知公告表单
const notificationForm = reactive({
  title: '',
  type: '',
  scope: 'all',
  content: '',
  priority: 'medium',
});

// 可用房间数据
const availableRooms = ref([
  { id: '101', roomNumber: '101', tenantName: '张三' },
  { id: '102', roomNumber: '102', tenantName: '李四' },
  { id: '201', roomNumber: '201', tenantName: '王五' },
  { id: '202', roomNumber: '202', tenantName: '赵六' },
  { id: '301', roomNumber: '301', tenantName: '孙七' },
]);

// 统计信息
const statistics = computed(() => {
  return {
    pendingWorkOrders: 5,
    processingWorkOrders: 3,
    completedWorkOrders: 12,
    todayCleaningTasks: 8,
    processingCleaningTasks: 2,
    completedCleaningTasks: 6,
    unreadNotifications: 3,
    todayNotifications: 2,
    totalNotifications: 25,
  };
});

// 最近活动
const recentActivities = ref([
  {
    id: '1',
    title: '新报修工单',
    description: '房间101提交了水电维修申请',
    time: dayjs().subtract(10, 'minute'),
    icon: 'ant-design:tool-outlined',
    color: '#ff4d4f',
  },
  {
    id: '2',
    title: '清洁任务完成',
    description: '房间201深度清洁已完成',
    time: dayjs().subtract(30, 'minute'),
    icon: 'ant-design:check-circle-outlined',
    color: '#52c41a',
  },
  {
    id: '3',
    title: '通知发布',
    description: '发布了关于电梯维护的通知',
    time: dayjs().subtract(1, 'hour'),
    icon: 'ant-design:notification-outlined',
    color: '#faad14',
  },
  {
    id: '4',
    title: '工单分派',
    description: '房间102电器维修工单已分派给维修人员',
    time: dayjs().subtract(2, 'hour'),
    icon: 'ant-design:user-outlined',
    color: '#1890ff',
  },
]);

// 工具函数
const formatDateTime = (datetime: any) => {
  return datetime ? dayjs(datetime).format('YYYY-MM-DD HH:mm') : '';datetimedayjs.formatdatetimedayjs.format
};

// 导航函数
const navigateToWorkOrders = () => {
  router.push('/hotel/work-orders');
};

const navigateToCleaning = () => {
  router.push('/hotel/cleaning');
};

const navigateToNotifications = () => {
  router.push('/hotel/notifications');
};

// 事件处理函数
const handleWorkOrderSave = () => {
  if (
    !workOrderForm.roomNumber ||
    !workOrderForm.type ||
    !workOrderForm.description
  ) {
    message.error('请填写完整的工单信息');
    return;
  }

  message.success('报修工单创建成功');
  showWorkOrderModal.value = false;
  handleWorkOrderCancel();
};

const handleWorkOrderCancel = () => {
  Object.assign(workOrderForm, {
    roomNumber: '',
    type: '',
    description: '',
    priority: 'medium',
    contactPhone: '',
  });
};

const handleCleaningSave = () => {
  if (
    !cleaningForm.roomNumber ||
    !cleaningForm.type ||
    !cleaningForm.plannedDate
  ) {
    message.error('请填写完整的清洁任务信息');
    return;
  }

  message.success('清洁任务安排成功');
  showCleaningModal.value = false;
  handleCleaningCancel();
};

const handleCleaningCancel = () => {
  Object.assign(cleaningForm, {
    roomNumber: '',
    type: '',
    plannedDate: null,
    plannedTime: null,
    requirements: '',
    remarks: '',
  });
};

const handleNotificationSave = () => {
  if (!notificationForm.title || !notificationForm.content) {
    message.error('请填写完整的通知信息');
    return;
  }

  message.success('通知公告发布成功');
  showNotificationModal.value = false;
  handleNotificationCancel();
};

const handleNotificationCancel = () => {
  Object.assign(notificationForm, {
    title: '',
    type: '',
    scope: 'all',
    content: '',
    priority: 'medium',
  });
};

// 初始化
onMounted(() => {
  console.log('服务管理页面已加载');
});
</script>

<style scoped>
.service-management {
  padding: 16px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.statistics-row {
  margin-bottom: 24px;
}

.module-row {
  margin-bottom: 24px;
}

.module-card {
  height: 200px;
}

.module-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.module-stats {
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.stat-label {
  color: #666;
}

.stat-value {
  font-weight: 600;
}

.stat-value.pending {
  color: #ff4d4f;
}

.stat-value.processing {
  color: #1890ff;
}

.stat-value.completed {
  color: #52c41a;
}

.stat-value.today {
  color: #faad14;
}

.stat-value.unread {
  color: #ff4d4f;
}

.stat-value.total {
  color: #666;
}

.module-actions {
  display: flex;
  gap: 8px;
}

.recent-activities {
  margin-top: 24px;
}

.activity-content {
  padding-left: 8px;
}

.activity-title {
  margin-bottom: 4px;
  font-weight: 500;
  color: #1f2937;
}

.activity-desc {
  margin-bottom: 4px;
  font-size: 14px;
  color: #666;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

:deep(.ant-timeline-item-head) {
  background-color: transparent;
}

:deep(.ant-timeline-item-tail) {
  border-left: 1px solid #f0f0f0;
}
</style>
